<template>
  <div class="page-container">
    <div class="button-group">
      <button
        @click="$router.push('/main/biao')"
        type="button"
        class="back-btn"
      >
        <i class="el-icon-back"></i> 返回
      </button>
      <span>
        <button @click="saveForm" v-if="!isView" type="button">
          <i class="el-icon-check"></i> 保存</button
        >&emsp;
        <button
          @click="goToList"
          type="button"
          style="background-color: gainsboro"
        >
          <i class="el-icon-menu"></i> 列表</button
        >&emsp;
        <button
          @click="printForm"
          type="button"
          style="background-color: darkgray"
        >
          <i class="el-icon-printer"></i> 打印
        </button>
      </span>
    </div>

    <h2>职员基本薪资核定表</h2>
    <div class="form-container">
      <table>
        <tbody>
          <tr>
            <td>姓名</td>
            <td colspan="2">
              <el-input
                v-model="formData.name"
                :disabled="isView"
                placeholder="请输入姓名"
              ></el-input>
            </td>
            <td>工号</td>
            <td colspan="2">
              <el-input
                v-model="formData.employeeId"
                :disabled="isView"
                placeholder="请输入工号"
              ></el-input>
            </td>
            <td>入职日期</td>
            <td colspan="2">
              <el-date-picker
                v-model="formData.startDate"
                type="date"
                :disabled="isView"
                placeholder="选择日期"
                style="width: 100%"
              >
              </el-date-picker>
            </td>
          </tr>

          <tr>
            <td>拟派部门</td>
            <td colspan="2">
              <el-input
                v-model="formData.department"
                :disabled="isView"
                placeholder="请输入部门"
              ></el-input>
            </td>
            <td>拟派职位</td>
            <td colspan="2">
              <el-input
                v-model="formData.position"
                :disabled="isView"
                placeholder="请输入职位"
              ></el-input>
            </td>
            <td>职等职级</td>
            <td colspan="2">
              <el-input
                v-model="formData.rank"
                :disabled="isView"
                placeholder="请输入职级"
              ></el-input>
            </td>
          </tr>
        </tbody>
      </table>

      <table class="salary-table">
        <thead>
          <tr>
            <td colspan="3" class="table-header">试用期内核计薪资</td>
            <td colspan="3" class="table-header">转正后核计薪资</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>基础工资</td>
            <td>
              <el-input-number
                v-model="formData.probationBasicSalary"
                :disabled="isView"
                :controls="false"
                :precision="2"
              >
              </el-input-number>
            </td>
            <td>基础工资</td>
            <td>
              <el-input-number
                v-model="formData.postProbationBasicSalary"
                :disabled="isView"
                :controls="false"
                :precision="2"
              >
              </el-input-number>
            </td>
          </tr>

          <tr>
            <td>技能工资</td>
            <td>
              <el-input-number
                v-model="formData.probationSkillSalary"
                :disabled="isView"
                :controls="false"
                :precision="2"
              >
              </el-input-number>
            </td>
            <td>技能工资</td>
            <td>
              <el-input-number
                v-model="formData.postProbationSkillSalary"
                :disabled="isView"
                :controls="false"
                :precision="2"
              >
              </el-input-number>
            </td>
          </tr>

          <tr>
            <td>岗位工资</td>
            <td>
              <el-input-number
                v-model="formData.probationPositionSalary"
                :disabled="isView"
                :controls="false"
                :precision="2"
              >
              </el-input-number>
            </td>
            <td>岗位工资</td>
            <td>
              <el-input-number
                v-model="formData.postProbationPositionSalary"
                :disabled="isView"
                :controls="false"
                :precision="2"
              >
              </el-input-number>
            </td>
          </tr>

          <tr>
            <td>加班工资</td>
            <td>
              <el-input-number
                v-model="formData.probationOvertimeSalary"
                :disabled="isView"
                :controls="false"
                :precision="2"
              >
              </el-input-number>
            </td>
            <td>加班工资</td>
            <td>
              <el-input-number
                v-model="formData.postProbationOvertimeSalary"
                :disabled="isView"
                :controls="false"
                :precision="2"
              >
              </el-input-number>
            </td>
          </tr>

          <tr>
            <td>特殊说明</td>
            <td>
              <el-input
                type="textarea"
                v-model="formData.probationSpecialNote"
                :disabled="isView"
                :rows="3"
                placeholder="请输入特殊说明"
              >
              </el-input>
            </td>
            <td>特殊说明</td>
            <td>
              <el-input
                type="textarea"
                v-model="formData.postProbationSpecialNote"
                :disabled="isView"
                :rows="3"
                placeholder="请输入特殊说明"
              >
              </el-input>
            </td>
          </tr>

          <tr>
            <td>合计月薪</td>
            <td>
              <el-input-number
                v-model="formData.probationTotalSalary"
                :disabled="isView"
                :controls="false"
                :precision="2"
              >
              </el-input-number>
            </td>
            <td>合计月薪</td>
            <td>
              <el-input-number
                v-model="formData.postProbationTotalSalary"
                :disabled="isView"
                :controls="false"
                :precision="2"
              >
              </el-input-number>
            </td>
          </tr>
        </tbody>
      </table>

      <table class="approval-table">
        <tbody>
          <tr>
            <td>薪资面谈人</td>
            <td>
              <el-input
                v-model="formData.salaryInterviewer"
                :disabled="isView"
                placeholder="请输入面谈人姓名"
              >
              </el-input>
            </td>
            <td>人资经办</td>
            <td>
              <el-input
                v-model="formData.hrOperator"
                :disabled="isView"
                placeholder="请输入经办人姓名"
              >
              </el-input>
            </td>
          </tr>
          <tr>
            <td>用人单位经理</td>
            <td>
              <el-input
                v-model="formData.manager"
                :disabled="isView"
                placeholder="请输入经理姓名"
              >
              </el-input>
            </td>
            <td>部长/总监</td>
            <td>
              <el-input
                v-model="formData.director"
                :disabled="isView"
                placeholder="请输入部长/总监姓名"
              >
              </el-input>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="notice">
        申明：本人对以上薪资核定、加班费支付、社保购买、个人所得税支付等无任何异议，并同意公司按制度核定我的薪资和加班费、购买保险、交纳个人所得税。
      </div>

      <table class="signature-table">
        <tbody>
          <tr>
            <td>应征者签名</td>
            <td>
              <el-input
                v-model="formData.applicantSignature"
                :disabled="isView"
                placeholder="请签名"
              >
              </el-input>
            </td>
            <td>日期</td>
            <td>
              <el-date-picker
                v-model="formData.applicantDate"
                type="date"
                :disabled="isView"
                placeholder="选择日期"
                style="width: 100%"
              >
              </el-date-picker>
            </td>
          </tr>
          <tr>
            <td>总裁/董事长</td>
            <td>
              <el-input
                v-model="formData.presidentSignature"
                :disabled="isView"
                placeholder="请签名"
              >
              </el-input>
            </td>
            <td>企业管理部</td>
            <td>
              <el-input
                v-model="formData.corporateManagementSignature"
                :disabled="isView"
                placeholder="请签名"
              >
              </el-input>
            </td>
          </tr>
          <tr>
            <td>总经理</td>
            <td colspan="3">
              <el-input
                v-model="formData.generalManagerSignature"
                :disabled="isView"
                placeholder="请签名"
              >
              </el-input>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="process-description">
        表单运作流程：人资面谈建议性工资 → 部门经理复核 → 部长/总监核实 →
        总经理审核 → 企业管理部复核 → 总裁批准
      </div>
    </div>
  </div>
</template>

<script>
import { getSalaryDetail, createSalary, updateSalary } from "@/api/salary";

export default {
  data() {
    return {
      formData: {
        id: "",
        name: "",
        employeeId: "",
        startDate: "",
        department: "",
        position: "",
        probationBasicSalary: 0,
        postProbationBasicSalary: 0,
        probationSkillSalary: 0,
        postProbationSkillSalary: 0,
        probationPositionSalary: 0,
        postProbationPositionSalary: 0,
        probationOvertimeSalary: 0,
        postProbationOvertimeSalary: 0,
        probationSpecialNote: "",
        postProbationSpecialNote: "",
        probationTotalSalary: 0,
        postProbationTotalSalary: 0,
        salaryInterviewer: "",
        hrOperator: "",
        manager: "",
        director: "",
        applicantSignature: "",
        applicantDate: "",
        presidentSignature: "",
        corporateManagementSignature: "",
        generalManagerSignature: "",
      },
      isView: false,
      isEdit: false,
    };
  },
  created() {
    const id = this.$route.query.id;
    const type = this.$route.query.type;

    if (id) {
      this.isEdit = type === "edit";
      this.isView = type === "view";
      this.fetchData(id);
    }
  },
  methods: {
    printForm() {
      window.print();
    },
    async fetchData(id) {
      try {
        const response = await getSalaryDetail(id);
        if (response.data) {
          this.formData = response.data;
        }
      } catch (error) {
        this.$message.error("获取数据失败：" + error.message);
      }
    },
    async saveForm() {
      try {
        let response;
        if (this.formData.id) {
          response = await updateSalary(this.formData.id, this.formData);
        } else {
          response = await createSalary(this.formData);
        }

        if (response.data) {
          this.$message.success("保存成功");
          this.goToList();
        }
      } catch (error) {
        this.$message.error("保存失败：" + error.message);
      }
    },
    goToList() {
      this.$router.push("/main/biao/jibenxz-list");
    },
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  padding: 24px;
  // background: #ffffff;
  border-radius: 8px;
  // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  max-width: 1200px;
  margin: 0 auto;
}

.button-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;

  button {
    padding: 10px 24px;
    border-radius: 4px;
    border: none;
    background: #02be34;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background: #02be34ad;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    &.back-btn {
      background: #409eff;

      &:hover {
        background: #66b1ff;
      }
    }
  }
}

h2 {
  text-align: center;
  color: #2c3e50;
  font-size: 24px;
  margin: 24px 0;
  font-weight: 600;
  letter-spacing: 1px;
}

.form-container {
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;

  td {
    padding: 12px;
    border: 1px solid #ebeef5;
    background: #ffffff;
    font-size: 14px;
    color: #606266;

    &:first-child {
      background: #f5f7fa;
      font-weight: 500;
      text-align: right;
      width: 120px;
    }
  }
}

.salary-table {
  .table-header {
    background: #409eff !important;
    color: #ffffff !important;
    font-weight: 600;
    text-align: center;
  }
}

:deep(.el-input),
:deep(.el-input-number) {
  width: 100%;

  .el-input__inner {
    border-radius: 4px;

    &:hover {
      border-color: #c0c4cc;
    }

    &:focus {
      border-color: #409eff;
      outline: none;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
    }
  }
}

:deep(.el-textarea) {
  width: 100%;

  .el-textarea__inner {
    min-height: 60px;
    resize: vertical;

    &:hover {
      border-color: #c0c4cc;
    }

    &:focus {
      border-color: #409eff;
      outline: none;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
    }
  }
}

.notice {
  padding: 16px;
  background: #f5f7fa;
  border-radius: 4px;
  margin: 20px 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
}

.signature-table {
  td {
    &:first-child {
      width: 100px;
    }
  }
}

.process-description {
  color: #909399;
  font-size: 13px;
  text-align: center;
  margin-top: 24px;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 4px;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .page-container {
    padding: 16px;
  }

  .button-group {
    flex-direction: column;

    button {
      width: 100%;
    }
  }

  table {
    td {
      padding: 8px;

      &:first-child {
        width: 90px;
      }
    }
  }
}

/* 打印样式 */
@media print {
  .page-container {
    padding: 0;
    box-shadow: none;
  }
  .notice{
    margin: 0px;
  }
  .button-group {
    display: none;
  }
  h2 {
    padding: 0px;
    margin: 0px;
  }
  table {
    border: 1px solid #ccc;
    margin: 0px;
    border-radius:0px ;

    td {
      border: 1px solid #ccc;
    }
  }

  textarea {
    border: 0px !important;
  }
  ::v-deep input.el-input__inner {
    border: none !important;
  }
  ::v-deep textarea.el-textarea__inner {
    border: none !important;
    resize: none;
  }
  ::v-deep i.el-input__icon {
    display: none !important;
  }
}
</style>